<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/common/import.jsp"%>
<!DOCTYPE html>
<html>
	<head>
		<title>用户注册</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
		
		<link rel="stylesheet" href="${ctx}/css/reg/demo.css">
		<link rel="stylesheet" href="${ctx}/css/reg/sky-forms.css">

		<script src="${ctx}/js/md5.js"></script>
		<script src="${ctx}/js/reg/jquery.validate.min.js"></script>
		<!--[if lt IE 10]>
			<script src="${ctx}/js/reg/jquery.placeholder.min.js"></script>
		<![endif]-->	
		
		
		<script type="text/javascript">
			//解决ie不支持trim
			$(document).ready(
		           function(){
		                 if(!String.prototype.trim) {
		                     String.prototype.trim = function () {
		                          return this.replace(/^\s+|\s+$/g,'');
		                     };
		               }
		           }
		      );
		
		$(function() {
			//注册表单提交
			var regForm = '#sky-form';
			$(regForm).form({
				onSubmit : function() {
					//多层校验
					var pass = $("#password").val();
					var userEname = $("#userEname").val();
					var userCname = $("#userCname").val();
					var mobile = $("#mobile").val();
					var email = $("#email").val();
					var passwordConfirm = $("#passwordConfirm").val();
					
					
					if(userEname == null || userEname.trim() == ""){
						$.messager.alert('提交结果', '用户名不能为空', 'warning');
						return false;
					}
					
					if(userCname == null || userCname.trim() == ""){
						$.messager.alert('提交结果', '姓名不能为空', 'warning');
						return false;
					}
					
					if(email == null || email.trim() == ""){
						$.messager.alert('提交结果', '邮箱不能为空', 'warning');
						return false;
					}
					
					if(mobile == null || mobile.trim() == ""){
						$.messager.alert('提交结果', '手机号不能为空', 'warning');
						return false;
					}
					
					if(pass == null || pass.trim() == ""){
						$.messager.alert('提交结果', '密码不能为空', 'warning');
						return false;
					}
					
					if(passwordConfirm==null || passwordConfirm.trim() == ""){
						$.messager.alert('提交结果', '验证密码不能为空', 'warning');
						return false;
					}
					if(pass.trim()!=passwordConfirm.trim()){
						$.messager.alert('提交结果', '两次密码不一致', 'warning');
						return false;
					}
					$("#userPass").val(pass.md5());
					
					
					$("#password").val(radom(pass));
					$("#passwordConfirm").val(radom(passwordConfirm));
					   
					return true;
				},
				success : function(data) {
					var result = jQuery.parseJSON(data);
					if (result.flag == 'T') {
						$.messager.alert('提交结果', result.msg+'点击确定跳转至登录页面', 'info',function(){
							window.location.href='${ctx}';
						});
					} else {
						$.messager.alert('提交结果', result.msg, 'error',function(){
						clearForm();
					});
					}
				},
				error:function(data){
					$.messager.alert('提交结果', '与服务器连接失败', 'error',function(){
						clearForm();
					});
				}
			});
		});


		//清空表单
		function clearForm(){
			$("#password").val("");
			$("#passwordConfirm").val("");
		}
		</script>	
	</head>
	
	<body class="bg-cyan">
		<div class="body body-s">		
			<form action="${ctx}/passport/reg/reg.action" id="sky-form" class="sky-form" method="post" >
				<input type="hidden" id="userPass" name="userPass">
				<header>仅限测试展示,挖的微软的界面<a href="${ctx}">登录</a></header>
				
				<fieldset>					
					<section>
						<label class="input">
							<i class="icon-append icon-user"></i>
							<input type="text" name="userEname" placeholder="用户名" id="userEname" >
							<b class="tooltip tooltip-bottom-right">请输入用户名</b>
						</label>
					</section>
					
					<section>
						<label class="input">
							<i class="icon-append icon-user"></i>
							<input type="text" name="userCname" placeholder="姓名" id="userCname" >
							<b class="tooltip tooltip-bottom-right">请输入姓名</b>
						</label>
					</section>
					
					<section>
						<label class="input">
							<i class="icon-append icon-envelope-alt"></i>
							<input type="email" autocomplete="off" name="email" placeholder="邮箱地址" id="email" >
							<b class="tooltip tooltip-bottom-right">请输入您的Email地址</b>
						</label>
					</section>

					<section>
						<label class="input">
							<i class="icon-append icon-envelope-alt"></i>
							<input type="phone" autocomplete="off" name="mobile" placeholder="手机号" id="mobile" >
							<b class="tooltip tooltip-bottom-right">请输入您的手机号码</b>
						</label>
					</section>
					
					<section>
						<label class="input">
							<i class="icon-append icon-lock"></i>
							<input type="password" autocomplete="off" placeholder="密码" id="password" onpaste="return false;">
							<b class="tooltip tooltip-bottom-right">请输入您的密码</b>
						</label>
					</section>
					
					<section>
						<label class="input">
							<i class="icon-append icon-lock"></i>
							<input type="password" autocomplete="off" id="passwordConfirm" placeholder="请再次输入您的密码" onpaste="return false;">
							<b class="tooltip tooltip-bottom-right">请再次输入您的密码</b>
						</label>
					</section>
				</fieldset>
				<footer>
					<button type="submit" class="button" >提交注册</button>
				</footer>
			</form>			
		</div>
	</body>
</html>